<!-- 参考官方文档 -->
<template>
    <view class="">
        <!-- scroll-y：纵向滑动 -->
        <scroll-view scroll-y class="scroll-view-y">
            <view class="box-text-y">元素1</view>
            <view class="box-text-y">元素2</view>
            <view class="box-text-y">元素3</view>
        </scroll-view>
        <!-- scroll-x：横向滑动 -->
        <scroll-view scroll-x class="scroll-view-x">
            <view class="box-text-x">元素1</view>
            <view class="box-text-x">元素2</view>
            <view class="box-text-x">元素3</view>
        </scroll-view>
    </view>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
    .scroll-view-y {
        width: 99%;
        height: 200px;
        border: 1px solid $custom-color-green;

        .box-text-y {
            height: 100px;
            background: $custom-color-red;
            margin: 5px;
        }
    }

    .scroll-view-x {
        width: 99%;
        height: 200px;
        border: 1px solid $custom-color-green;
        white-space: nowrap;
        margin-top: 10px;

        .box-text-x {
            width: 200px;
            height: 100%;
            background: $custom-color-red;
            margin: 5px;
            display: inline-block;
        }
    }
</style>